<template>
  <el-container style="width: 70%; margin: 0 auto">
    <el-header class="profile-header" height="260px">
      <el-image :src="imgUrl" :fit="cover" style="width: 100%; height: 100%" />
    </el-header>

    <el-container>
      <el-aside width="240px">
        <el-menu default-active="1" class="el-menu-vertical-demo">
          <router-link class="menu-item" to="/index/profile/record">
            <el-menu-item index="1">
              <el-icon><Notebook /></el-icon>
              <span>借阅记录</span>
            </el-menu-item>
          </router-link>
          <!-- <el-menu-item index="4">
            <el-icon><setting /></el-icon>
            <span>未归还图书</span>
          </el-menu-item> -->
          <router-link class="menu-item" to="/index/profile/record">
            <el-menu-item index="2">
              <el-icon><Coin /></el-icon>
              <span>个人信息</span>
            </el-menu-item>
          </router-link>
          <router-link class="menu-item" to="/index/profile/repass">
            <el-menu-item index="3">
              <el-icon><Lock /></el-icon>
              <span>修改密码</span>
            </el-menu-item>
          </router-link>
        </el-menu>
      </el-aside>
      <el-main style="padding-top: 0">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import imgUrl from "../assets/image/profile-head-img.jpg";
</script>

<style scoped>
.profile-header {
  margin: 20px 0;
  padding: 0;
}
.el-menu-vertical-demo {
  border: 1px solid #cacaca;
}
.menu-item {
  text-decoration: none;
}
</style>
